<template>
    <a-card :bordered="false">
        <a-spin :spinning="confirmLoading">
            <div class="table-operator">
                <a-button shape="round" size="small" type="primary" icon="plus" @click="handleEdit({reportMenu:reportMenu},'reportForm','新增')">添加</a-button>
            
            </div>
            <div class="part_item" >
                <ul>
                    <li v-for="(item,i) in reportList" :key="i" >
                        <div class="delete" @click="delReport(item)">×</div>
                        <a @click="openReport(item)">
                            <div class="part_icon"><img src="~@/views/img/excel.png"></div>
                            <span>{{item.reportName}}</span>
                        </a>
                    </li>
                </ul>
            
            </div>
        
            <reportForm ref="reportForm" @close="queryReport" @ok="queryReport"></reportForm> 
        </a-spin>
    </a-card>
</template>

<script>

import request from '@/utils/request'
import reportForm from './reportForm'
import {SysMixin} from '@/mixins/SysMixin'
import defaultSettings from '@/config/defaultSettings'
import { Modal } from 'ant-design-vue'
export default {
    name:'reportList',
    components:{
       reportForm
    },
    mixins:[SysMixin],
    data(){
        return{
            reportMenu:null,
            systemNo:defaultSettings.systemNo,
            reportList:[],
            confirmLoading:false
        }
    },
    watch: {
        $route: {
            handler: function(route) {
                this.reportMenu = route.name
                this.queryReport()
            },
            immediate: true
        }
    },
   
    mounted(){
        // this.queryReport()
    },
    methods:{
        queryReport(){
            let that = this
            that.confirmLoading = true
            let formData = {
                queryForm:[{field:'systemNo',val:this.systemNo},{field:'reportMenu',val:this.reportMenu},{field:'isUse',val:defaultSettings.常量.是}],
                orderColumns:[{field:'reportOrder',val:'asc'}]
            }
            request({url: '/SysRdpReportController/page',method: 'post',data: formData}).then((res)=>{
                if(res.success){
                     this.reportList = res.result
                }else{
                    that.$message.warning(res.message);
                }
            }).finally(()=>{
                that.confirmLoading = false
            })
        },
        openReport(report){
            window.open(report.reportUrl, '_blank');
        },
        delReport(report){
            var that = this;
            Modal.confirm({
                title: "系统提醒",
                content: "确定删除？",
                onOk: () => {
                    that.confirmLoading = true
                     request.get('/SysRdpReportController/del',{params:{keyId:report.keyId}}).then((res)=>{
                        if (res.success) {
                            that.$message.success(res.message);
                            that.queryReport();
                        } else {
                            that.$message.warning(res.message);
                        }
                    }).finally(()=>{
                        that.confirmLoading = false
                    })
                },
                onCancel () {}
              })
        }
    }
}
</script>

<style scoped>

    .part_item ul,li{ margin:0; padding:0; list-style:none;}
    .part_item ul{ width:100%; }
    .part_item ul li{transition:all 0.5s;display:inline-block; margin:0 4px; margin-top:14px;position:relative;}
    .part_item{ width:100%; }
    .part_item .part_icon{ width:180px; height:130px; background:#F5F5F5;}
    .part_item .part_icon img{ display:inline-block; width:60px; height:60px; margin:40px 0 0 60px;}
    .part_item span{background:#e5e5e5;height:36px;display:inline-block;  width:100%;  color: #333;display: flex;justify-content: center; align-items: center;}
    .part_item li:hover{transform: scale(1.1); -webkit-transform:scale(1.1); -moz-transform:scale(1.1);box-shadow:0px 3px 20px #888888;}
    .part_item li a{color:#333;text-decoration:none; }
    .part_item .delete{ width:20px; height:20px;position:absolute;font-size: 20px; right:2px; top:2px;cursor: pointer;color:rgba(0,0,0,0.3);}
    .part_item .delete:hover{ color:#333333;}
</style>